<template>
  <Page>
    <el-card>
      <template #header>高危语句规则</template>
      <el-button v-if="tableData.length > 0" class="add-btn" type="primary" @click="handleAdd" size="small">新增</el-button>
      <el-table :data="tableData" stripe style="width: 100%" v-if="tableData.length > 0">
        <el-table-column prop="expression" label="语法检测表达式" />
        <el-table-column prop="description" label="规则说明" />
        <el-table-column prop="script_types" label="脚本类型"/>
        <el-table-column prop="action" label="动作">
          <template #default="scope">
            <el-tag type="primary" size="small">{{scope.row.action}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="180">
          <template #default="scope">
            <div class="operation-box">
              <el-switch v-model="scope.row.status" size="small"  @click="handleSwitch(scope.row)" />
              <!-- <el-icon @click="handleEdit(scope.row)" size="20"><Top /></el-icon>
              <el-icon @click="handleEdit(scope.row)" size="20"><Bottom /></el-icon> -->
              <el-icon @click="handleEdit(scope.row)" size="20"><Edit /></el-icon>
              <el-icon @click="handleDelete(scope.row)" size="20"><Delete /></el-icon>
            </div>
          </template>
        </el-table-column>
      </el-table>
      
      <el-empty v-if="tableData.length === 0">
        <el-button type="primary" @click="handleAdd">创建规则</el-button>
      </el-empty>
      <template #footer>
        <Pagination v-if="tableData.length > 0" ref="paginationRef" :total="total" :tablePagination="tablePagination" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></Pagination>
      </template>
      <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        :before-close="handleCloseDialog"
        width="500"
      >
        <AddDialog ref="addDialogRef" v-if="addShow" @submit="handleAddSubmit" @close="handleCloseDialog" :data="rowData" :isEdit="isEdit" />
      </el-dialog>
    </el-card>
  </Page>
</template>

<script lang="ts" setup>
import { ref,defineAsyncComponent,onMounted } from 'vue';
import { getDangerousRuleList,dangerousRuleDelete,dangerousRuleChangeStatus } from '@/api/dangerousHostApi';
import { ElMessage,ElMessageBox } from 'element-plus'

const AddDialog = defineAsyncComponent(() => import('./form/addDialog.vue')); 
const Pagination = defineAsyncComponent(() => import('./form/pagination.vue')); 
const dialogVisible = ref(false)
const addShow = ref(false)
const dialogTitle = ref('')
const addDialogRef = ref();
const paginationRef = ref();
let total:number = 0
const tablePagination = ref({
  size:10,
  page:1
})
const tableData:any = ref([])
const isEdit = ref(false)
const handleAdd = () => {
  dialogVisible.value = true
  addShow.value = true
  isEdit.value = false
  dialogTitle.value = '新增高危语句规则'
}
const rowData = ref({})
const handleEdit = (row: any) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑高危语句规则'
  addShow.value = true
  const data = {...row}
  data.script_types = data.script_types.split(',')
  rowData.value = data
  isEdit.value = true
}
const handleDelete = async(row: any) => {
  ElMessageBox.confirm('确定删除该规则吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await deleteDangerousRule(row)
  })
}
const deleteDangerousRule = async (row: any) =>{
  const data = {
    id: [row.id]
  }
  const res = await dangerousRuleDelete(data)
  if(res.data.code === 200){
    getDangerousRuleListData()
  }else{
    ElMessage.error(res.data.msg)
  }
}
const handleSwitch = async(row: any) => {
  console.log('切换', row)
  const res = await dangerousRuleChangeStatus({id: row.id,status: row.status})
  if(res.data.code === 200){
    ElMessage.success('操作成功')
  }else{
    row.status = !row.status
    ElMessage.error(res.data.msg)
  }
}
// 分页切换
const handleSizeChange = (size: number) => {
  tablePagination.value.size = size;
  tablePagination.value.page = 1; // 重置到第一页
  getDangerousRuleListData();
};
const handleCurrentChange = (page: number) => {
  tablePagination.value.page = page;
  getDangerousRuleListData();
};
const handleAddSubmit = (formData: any) => {
  handleCloseDialog()
  getDangerousRuleListData()
}
const handleCloseDialog = () =>{
  
  dialogVisible.value = false
  addShow.value = false
  dialogTitle.value = ''
  addShow.value = false
  addDialogRef.value?.resetForm()
}
const getDangerousRuleListData = async() =>{
  const res = await getDangerousRuleList({
    current_page: tablePagination.value.page,
    page_size: tablePagination.value.size,
  })
  if(res.data.code === 200 && res.data.data !== null){
    tableData.value = res.data.data
    total = res.data.total
    tablePagination.value.page = res.data.current_page
    tablePagination.value.size = res.data.page_size
  }
}
onMounted(()=>{
  getDangerousRuleListData()
})
</script>

<style lang="scss" scoped>
.add-btn{
  float: right;
}
.operation-box{
  display: flex;
  align-items: center;
  justify-content: center;
  .el-switch{
    margin-right: 10px;
  }
  .el-icon{
    margin-right: 10px;
    padding: 3px;
    :hover{
      cursor: pointer;
      color: #409eff;
    }
  }
}

.pagination {
    margin-top: 16px;
    .el-pagination {
      text-align: right;
      padding-top: 5px;
      padding-bottom: 5px;
      border-top: 0px;
      justify-content: flex-end;
      .el-pagination__sizes,
      .el-pagination__total {
        float: left;
      }
    }
  }
:deep(.pagination .el-pagination) {
  & > * {
    flex: none;
  }
  .el-pagination__sizes {
    width: 100%;
    text-align: left;
    flex-shrink: 1;
  }
  .el-pagination__jump .el-input__inner {
    min-width: 26px;
  }
}
</style>